@import '/static/common/less-config.less';
.icon {
    display: inline-block;
    vertical-align: middle;
    
}
/*课程类型icon图标*/
.icon-folder-status{
    width: 10px;
    height: 12px;
    background: url(../img/icon-folder-open-top.png?__sprite)  no-repeat left center;
    &.status-close{
            background: url(../img/icon-folder-close-top.png?__sprite)  no-repeat left center;

    }
}

.icon-folder-h-line{
    width: 5px;
    height: 12px;
    background: url(../img/icon-folder-h-line.png?__sprite)  no-repeat left center;
}
.icon-folder-folder-status{
    width: 14px;
    height: 12px;
    background: url(../img/icon-folder-folder-close.png?__sprite)  no-repeat left center;
    &.folder-open{
            background: url(../img/icon-folder-folder-open.png?__sprite)  no-repeat left center;

    }
}


.icon-foot {
    height: 21px;
    background: url(../img/foot.png?__sprite) no-repeat left center;
}
.icon-forward {
    height: 21px;
    background: url(../img/forward.png?__sprite) no-repeat left center;
}
.icon-view {
    height: 21px;
    background: url(../img/view.png?__sprite)  no-repeat left center;
}
.icon-nick {
    width: 20px;
    height: 21px;
    background: url(../img/nick.png?__sprite)  no-repeat left center;
}
.icon-search {
    width: 20px;
    height: 16px;
    background: url(../img/search-gray.png?__sprite)  no-repeat left center;
}
.icon-close {
    width: 15px;
    height: 8px;
    background: url(../img/close.png?__sprite)  no-repeat right center;
}
.icon-close-gray{
        width: 20px;
    height: 18px;
    background: url(../img/icon-close-gray.png?__sprite)  no-repeat center center;
}
.icon-buy{
    width: 15px;
    height: 20px;
    padding-left: 20px;
    background: url(../img/b1.png?__sprite)  no-repeat left center;
}
.icon-pop {
    height: 20px;
    width: 28px;
    color:#fff;
    background: url(../img/pop.png?__sprite) no-repeat left center;
}
.icon-female {
    width: 16px;
    height: 16px;
    background: url(../img/female.png?__sprite)  no-repeat left center;
}
.icon-setting {
    width: 16px;
    height: 16px;
    background: url(../img/setting.png?__sprite)  no-repeat left center;
}
.icon-plan {
    width: 15px;
    height: 18px;
    background: url(../img/plan.png?__sprite)  no-repeat left center;
}
.icon-trash {
    width: 14px;
    height: 16px;
    background: url(../img/trash.png?__sprite)  no-repeat left center;
}

.icon-info{
    width: 30px;
    height: 16px;
    position: relative;
    background: url(../img/info.png?__sprite)  no-repeat right center;
}
.icon-question{
    width: 16px;
    height: 16px;
    position: relative;
    background: url(../img/question.png?__sprite)  no-repeat center center;
    
}
.icon-edit{
    width: 14px;
    height: 14px;
    position: relative;
    background: url(../img/edit1.png) no-repeat center center;
    cursor: pointer;
}
.icon-plane-from{
    width: 27px;
    height: 20px;
    position: relative;
    background: url(../img/plane.png) no-repeat center center;
    cursor: pointer;
}
.icon-plane-to{
    width: 27px;
    height: 20px;
    position: relative;
    background: url(../img/plane1.png) no-repeat center center;
    cursor: pointer;
}
.icon-delete1{
    width: 20px;
    height: 20px;
    position: relative;
    background: url(../img/delete2.png) no-repeat center center;
    cursor: pointer;
}
.icon-delete{
    width: 14px;
    height: 14px;
    position: relative;
    background: url(../img/delete1.png) no-repeat center center;
    cursor: pointer;
}
.icon-move{
    width: 14px;
    height: 14px;
    position: relative;
    background: url(../img/move.png) no-repeat center center;
    cursor: pointer;
}
.icon-upload{
    width: 20px;
    height: 16px;
    position: relative;
    background: url(../img/upload.png) no-repeat left center;
    cursor: pointer;
}
.icon-newfolder{
    width: 20px;
    height: 16px;
    position: relative;
    background: url(../img/newfolder.png) no-repeat left center;
    cursor: pointer;
}

.icon-desc{
    width: 20px;
    height: 14px;
    position: relative;
    background: url(../img/desc-a.png?__sprite)  no-repeat right center;
    cursor: pointer;
}

.icon-desc-active{
    width: 20px;
    height: 14px;
    position: relative;
    background: url(../img/desc-active.png?__sprite)  no-repeat right center;
    cursor: pointer;
    
}
.icon-asc{
    width: 20px;
    height: 14px;
    position: relative;
    background: url(../img/asc-a.png?__sprite)  no-repeat right center;
    cursor: pointer;
    
}
.icon-asc-active{
    width: 20px;
    height: 14px;
    position: relative;
    background: url(../img/asc-active.png?__sprite)  no-repeat right center;
    cursor: pointer;
    
}
/*徽标*/

.red-left {
    height: 20px;
    background-color: @red-btn;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    margin: 2px 0;
    padding: 0 5px;
    position: relative;
    margin-left: 6px;
    margin-right: 3px;
}
.red-left:before {
    position: absolute;
    left: -9px;
    top: 4px;
    content: " ";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 9px solid @red-btn;
    border-bottom: 5px solid transparent;
}
.red-right {
    height: 28px;
    background-color: @red-btn;
    color: #FFF;
    font-size: 0.6em;
    line-height: 28px;
    display: inline-block;
    text-align: center;
    margin: 2px 14px 2px 6px;
    padding: 0px 8px;
    position: relative;
}
.red-right:before {
    position: absolute;
    left: 28px;
    top: 10px;
    content: " ";
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-left: 7px solid @red-btn;
    border-bottom: 5px solid transparent;
}
.red-up {
    height: 22px;
    background-color: @red-btn;
    color: #FFF;
    font-size: 0.6em;
    line-height: 22px;
    display: inline-block;
    text-align: center;
    margin: 2px 14px 2px 6px;
    padding: 0px 8px;
    position: relative;
}
.red-up:before {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: -7px;
    content: " ";
    width: 0px;
    height: 0px;
    border-bottom: 7px solid @red-btn;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.black-left {
    height: 20px;
    background-color: #404040;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    margin: 2px 0;
    padding: 0 5px;
    position: relative;
    margin-left: 6px;
    margin-right: 3px;
}
.black-left:before {
    position: absolute;
    left: -9px;
    top: 4px;
    content: " ";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 9px solid #404040;
    border-bottom: 5px solid transparent;
}
.grey-left {
    height: 20px;
    background-color: #b2b2b2;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    margin: 2px 0;
    padding: 0 5px;
    position: relative;
    margin-left: 6px;
    margin-right: 3px;
}
.grey-left:before {
    position: absolute;
    left: -9px;
    top: 4px;
    content: " ";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 9px solid #b2b2b2;
    border-bottom: 5px solid transparent;
}
